<template>
  <div id="questionManager-outer-box">
    <div style="margin-bottom: 10px">
      <a-input
        v-model="queryParams.id"
        allow-clear
        placeholder="题目ID"
        style="width: 200px; margin-right: 10px"
      />
      <a-input-search
        v-model="queryParams.title"
        allow-clear
        :style="{ width: '320px' }"
        placeholder="题目标题"
        @click="loadData"
        search-button
      >
        <template #button-icon>
          <icon-search />
        </template>
        <template #button-default> Search</template>
      </a-input-search>
    </div>
    <a-table :columns="columns" :data="formData" :pagination="false">
      <template #id="{ record }">
        <!--        <a-input v-model="formData[rowIndex].updateTime" />-->
        <a-tag color="#00b42a" style="font-size: 8px">{{ record.id }}</a-tag>
      </template>
      <template #updateTime="{ rowIndex }">
        {{ formData[rowIndex].updateTime.slice(0, 10) }}
      </template>
      <template #tags="{ record }">
        <!--        <a-input v-model="formData[rowIndex].updateTime" />-->
        <a-input-tag v-model="record.tags" readonly />
      </template>

      <template #otherInfo="{ record }">
        <a-button
          type="primary"
          status="success"
          @click="$modal.info({ title: '题目内容', content: record.content })"
          >题目内容
        </a-button>
        <a-button
          class="inline-button"
          type="dashed"
          status="warning"
          @click="
            $modal.info({
              title: '限制',
              content: JSON.stringify(record.judgeConfig),
            })
          "
          >限制
        </a-button>

        <a-button
          class="inline-button"
          status="success"
          @click="
            $modal.info({
              title: '参考答案',
              content: JSON.stringify(record.answer),
            })
          "
          >参考答案
        </a-button>
      </template>
      <template #optional="{ record }">
        <a-button
          type="outline"
          status="primary"
          @click="handleUpdateById(record.id)"
          >修改
        </a-button>
        <a-popconfirm
          @ok="handleDeleteById(record.id)"
          content="确定删除当前记录吗?"
        >
          <a-button class="inline-button" type="dashed" status="danger"
            >删除
          </a-button>
        </a-popconfirm>
      </template>
    </a-table>
    <!--    <a-pagination-->
    <!--      v-model:total="queryParams.total"-->
    <!--      v-model:current="queryParams.current"-->
    <!--      v-model:page-size="queryParams.size"-->
    <!--      show-total-->
    <!--      show-jumper-->
    <!--      show-page-size-->
    <!--      :page-size-options="[3, 8, 10, 15]"-->
    <!--    />-->
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { QuestionControllerService } from "../../generated";
import { IconSearch } from "@arco-design/web-vue/es/icon";
import { Message } from "@arco-design/web-vue";
import { useRouter } from "vue-router";

let formData = ref(null);

let router = useRouter();

let queryParams = reactive({
  id: undefined,
  current: 1,
  size: 3,
  tags: [],
  title: "",
  userId: undefined,
  total: 50,
});

let loadData = async () => {
  console.log("loadData");
  let res = await QuestionControllerService.listQuestionVoByPageUsingPost(
    queryParams
  );
  // console.log(res);
  // console.log(res.data);
  // console.log(res.data.records);

  if (res.code === 0) {
    formData.value = res.data.records;

    queryParams.total = res.data.total;
    queryParams.current = res.data.current;
    queryParams.size = res.data.size;
  } else {
    Message.error(res.message);
  }
};

onMounted(() => {
  loadData();
});

const columns = [
  {
    title: "ID",
    slotName: "id",
  },
  {
    title: "标题",
    dataIndex: "title",
  },

  {
    title: "标签",
    slotName: "tags",
  },
  {
    title: "创建用户",
    dataIndex: "userVO.userRole",
  },
  {
    title: "其他信息",
    slotName: "otherInfo",
  },
  {
    title: "更新日期",
    dataIndex: "updateTime",
    slotName: "updateTime",
  },
  {
    title: "操作",
    slotName: "optional",
  },
];

let handleDeleteById = async (id: number) => {
  console.log("handleDeleteById", id);
  let res = await QuestionControllerService.deleteQuestionUsingPost({ id: id });
  if (res.code === 0) {
    Message.success("删除成功!");
    loadData();
  } else {
    Message.error("删除失败!");
  }
};
let handleUpdateById = (id: number) => {
  console.log(id);
  router.push({
    name: "更新问题",
    params: {
      id,
    },
  });
};
</script>

<style scoped>
.inline-button {
  margin: 0 5px;
}
</style>
